<template>
	<div>
		<div class="btn-list-box">
			<p class="backgroundTitelBox">
				{{ $t('member.risk_information') }}
			</p>
			<el-button
				type="primary"
				icon="el-icon-refresh"
				@click="refresh"
				:loading="refreshLoading"
			>
				{{ $t('common.refresh') }}
			</el-button>
			<p class="editMsg">
				<i class="el-icon-edit-outline"></i>
				<br />
				{{ $t('common.edit') }}
			</p>
			<el-button
				v-if="hasPermission('101034')"
				size="mini"
				type="primary"
				@click="handleEdit($t('common.risk_control_level'))"
			>
				{{ $t('common.risk_control_level') }}
			</el-button>
			<el-button
				v-if="hasPermission('101035')"
				size="mini"
				type="primary"
				:disabled="btnPower.includes(6)"
				@click="handleEdit($t('member.label_name'))"
			>
				{{ $t('member.label_name') }}
			</el-button>
			<el-button
				v-if="hasPermission('90810105')"
				size="mini"
				type="primary"
				:disabled="btnPower.includes(11)"
				@click="handleEdit($t('member.rebate_status'))"
			>
				{{ $t('member.rebate_status') }}
			</el-button>
            <el-button
				v-if="hasPermission('90810106')"
				size="mini"
				type="primary"
				:disabled="btnPower.includes(12)"
				@click="handleEdit($t('member.risk_remark'))"
			>
				{{ $t('member.risk_remark') }}
			</el-button>

		</div>
		<el-dialog
			:title="dialogTitle"
			width="35%"
			:append-to-body="true"
			:destroy-on-close="true"
			:visible.sync="editVisible"
			:close-on-click-modal="false"
			:before-close="closeFormDialog"
			@close="closeFormDialog"
		>
			<div
				v-loading="editLoading"
				element-loading-spinner="el-icon-loading"
			>
				<el-form
					ref="editForm"
					:rules="rules"
					:model="editData"
					label-width="120px"
				>
					<el-form-item
						v-if="dialogTitle === $t('common.risk_control_level')"
						:label="`${$t('common.risk_control_level')}:`"
					>
						<el-select
							v-model="editData.windControlId"
							:placeholder="$t('common.please_choose')"
						>
							<el-option
								v-for="item in riskLevelList"
								:key="item.id"
								:label="item.windControlLevelName"
								:value="item.id"
							></el-option>
						</el-select>
					</el-form-item>
					<el-form-item
						v-if="dialogTitle === $t('member.label_name')"
						:label="`${$t('member.label_name')}:`"
					>
						<el-select
							v-model="editData.labelId"
							:placeholder="$t('common.please_choose')"
						>
							<el-option
								v-for="item in memberLabelList"
								:key="item.id"
								:label="item.labelName"
								:value="item.id"
							></el-option>
						</el-select>
					</el-form-item>
					<el-form-item
						v-if="dialogTitle === $t('member.rebate_status')"
						:label="`${$t('member.rebate_status')}:`"
					>
						<el-radio-group v-model="editData.rebateFreezeStatus">
							<el-radio :label="0">
								{{ $t('common.account_status_normal') }}
							</el-radio>
							<el-radio :label="1">
								{{ $t('common.account_status_suspend') }}
							</el-radio>
						</el-radio-group>
					</el-form-item>
					<el-form-item :label="remarkTitle" prop="remark">
						<el-input
							v-model="editData.remark"
							maxlength="500"
							type="textarea"
							show-word-limit
							clearable
							:placeholder="$t('common.please_enter')"
						>
						</el-input>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click="closeFormDialog">
						{{ $t('common.cancel') }}
					</el-button>
					<el-button
						type="primary"
						:disabled="editLoading"
						:loading="editLoading"
						@click="submitEdit"
					>
						{{ $t('common.sure') }}
					</el-button>
					<p
						v-if="dialogTitle === $t('common.name')"
						style="color:#ff4404;margin:15px 0px;"
					>
						【{{ $t('member.be_careful') }}】
					</p>
				</div>
			</div>
		</el-dialog>
	</div>
</template>
<script>
import list from '@/mixins/list'
import { rules } from './rules'
import { NO_SPECIAL_CHAR } from '@/utils/pattern'
import { getNewSubStrAndLen } from '@/utils/validate'
import { TransitionGroupStub } from '@vue/test-utils'
export default {
	mixins: [list],
	props: {
		parentData: { type: Object, default: () => ({}) },
		parentRefresh: { type: Function, default: () => null },
		userInfo: { type: Object, default: {} },
		btnPower: { type: Array, default: [] },
		userRiskControlNote: { type: Array, default: {} },
		showRiskControlNote: {type: String, default:'-'}
	},
	data() {
		return {
			dialogTitle: '',
			editData: {
				accountStatus: [],
				windControlId: '',
				labelId: '',
				birthday: '',
				nickName: '',
				realName: '',
				areaCode: '',
				mobile: '',
				gender: '',
				email: '',
				resetPayPassword: '',
				remark: '',
				creditLevel: '',
				rebateFreezeStatus: ''
			},
			riskLevelList: [],
			memberLabelList: [],
			creditLevelList: [],
			zonecodeList: [],
			editVisible: false,
			editLoading: false,
			timeControl: {
				disabledDate: (time) => {
					return time.getTime() > Date.now()
				}
			},
			remarkTitle: this.$t('member.submit_comments'),
			selectedZonecode: {
				len: []
			},
			preMemberRebateState: 0,
			refreshLoading: false
		}
	},
	computed: {
		rules,
		genderType() {
			return this.globalDics.genderType || []
		}
	},
	watch: {
		'editData.windControlId': {
			handler(newVal) {
				for (let i = 0; i < this.riskLevelList.length; i++) {
					const ele = this.riskLevelList[i]
					if (newVal === ele.id) {
						this.editData.windControlName = ele.windControlLevelName
					}
				}
			},
			deep: true
		},
		'editData.labelId': {
			handler(newVal) {
				for (let i = 0; i < this.memberLabelList.length; i++) {
					const ele = this.memberLabelList[i]
					if (newVal === ele.id) {
						this.editData.labelName = ele.labelName
					}
				}
			},
			deep: true
		}
	},
	created() {
		this.refreshLoading = true
		Promise.all([
			this.getWindControllerLevelDict(),
			this.getMemberLabelDict(),
			this.getCreditLevelList()
			// this.getUserInfo()
			// this.getVenueList()
		]).finally(() => {
			this.refreshLoading = false
		})
	},
	methods: {
		// 字母数字长度为1，汉字长度为2,总计不超过12个
		handleNickNameInput(val) {
			const { newStr } = getNewSubStrAndLen(val)
			this.editData.nickName = newStr
		},
		handleEdit(val) {
			const {
				loginLockStatus,
				gameLockStatus,
				paymentLockStatus,
				windControlId,
				creditLevel,
				rebateFreezeStatus
			} = this.userInfo
			// this.infoObj
			this.remarkTitle = this.$t('member.submit_comments')
			this.editData.remark = ""
			switch (val) {
				case this.$t('common.account_status'):
					this.editData.accountStatus = []
					if (loginLockStatus === 1) {
						this.editData.accountStatus.push('1')
					}
					if (gameLockStatus === 1) {
						this.editData.accountStatus.push('2')
					}
					if (paymentLockStatus === 1) {
						this.editData.accountStatus.push('3')
					}
					break
				case this.$t('common.risk_control_level'):
					// this.editData.windControlId =
					// 	windControlId + '' === '0' ? '' : windControlId
					this.editData.windControlId = undefined
					for (const item of this.riskLevelList) {
						if (windControlId === item.id) {
							this.editData.windControlId = windControlId
							break
						}
					}
					break
				case this.$t('member.credit_rating'):
					this.editData.creditLevel = creditLevel
					break
				// case this.$t('member.activity_flow_limit'):
				// 	this.getActivityFlow()
				// 	break
				case this.$t('member.rebate_status'):
					this.preMemberRebateState = rebateFreezeStatus
					this.editData.rebateFreezeStatus = rebateFreezeStatus
					this.remarkTitle = this.$t('member.submit_comments')
					break
				case this.$t('member.risk_remark'):
					this.editData.remark = this.showRiskControlNote !== '-' ? this.showRiskControlNote : ""
					this.remarkTitle = this.$t('member.submit_comments')
				default:
					this.remarkTitle = this.$t('member.submit_comments')
					break
			}
			this.dialogTitle = val
			this.editVisible = true
			// this.editVisible = val !== this.$t('member.activity_flow_limit')
			// this.activityVisible = val === this.$t('member.activity_flow_limit')
		},
		submitEdit() {
			const data = {}
			const params = this.editData
			data.userName = this.parentData.userName
			data.merchantId = this.parentData.merchantId
			data.userId = this.parentData.userId
			data.note = ""
			params.remark = params.remark.trim()
			this.$refs.editForm.validate((valid) => {
				if (valid) {
					switch (this.dialogTitle) {
						case this.$t('common.risk_control_level'):
							data.windControlAfter = {
								windControlId: params.windControlId,
								windControlName: this.editData.windControlName,
								remark: params.remark
							}
							this.setMemberInfoEdit(data)
							break
						case this.$t('member.label_name'):
							data.labelAfter = {
								labelId: params.labelId,
								labelName: params.labelName,
								remark: params.remark
							}
							this.setMemberInfoEdit(data)
							break

						case this.$t('member.rebate_status'):
							if (params.rebateFreezeStatus === 0) { // 会员返水状态由冻结变成正常
								// data.unfreezeAt = dayjs().format('YYYY-MM-DD')
								// data.unfreezeBy = ""
								data.freezeStatus = params.rebateFreezeStatus
								data.unfreezeRemark = params.remark
								this.setMemberRebateStatusEdit(data)
							}
							if (params.rebateFreezeStatus === 1) { // 会员返水状态由冻结变成正常
								// data.freezeAt = dayjs().format('YYYY-MM-DD')
								// data.freezeBy = ""
								data.freezeRemark = params.remark
								data.freezeStatus = params.rebateFreezeStatus
								this.setMemberRebateStatusEdit(data)
							}
							break
						case this.$t('member.risk_remark'):
							data.note = params.remark
							this.editData.remark = data.note
							this.setRiskControlNoteEdit(data)
							break
						default:

							break
					}
				} else {
					return false
				}
			})
		},
		// 编辑信息
		setMemberInfoEdit(val) {
			this.editLoading = true
			this.$api
				.setMemberInfoEdit(val)
				.then((res) => {
					if (res.code === 200) {
						this.$refs.editForm.resetFields()
						this.$message.success(this.$t('common.action_success'))
						this.editVisible = false
						this.editLoading = false
						// this.getUserInfo()
						this.$emit('parentRefresh')
					}
				})
				.catch(() => {
					this.editLoading = false
				})
		},
		// 编辑会员返水状态
		setMemberRebateStatusEdit(val) {
			this.editLoading = true
			this.$api
				.rebateStatusFreezeRecordSaveOrUpdate(val)
				.then((res) => {
					if (res.code === 200) {
						this.$refs.editForm.resetFields()
						this.$message.success(this.$t('common.action_success'))
						this.editVisible = false
						this.editLoading = false
						// this.getUserInfo()
						this.$emit('parentRefresh')
					}
				})
				.catch(() => {
					this.editLoading = false
				})
		},
		setRiskControlNoteEdit(val) {
			this.editLoading = true
			this.$api
				.riskControlNoteSave(val)
				.then((res) => {
					if (res.code === 200) {
						this.$refs.editForm.resetFields()
						this.$message.success(this.$t('common.action_success'))
						this.editVisible = false
						this.editLoading = false
						// this.getUserInfo()
						this.$emit('parentRefresh')
					}
				})
				.catch(() => {
					this.editLoading = false
				})
		},
		// 编辑备注
		getMemberRemarkAdd(val) {
			this.editLoading = true
			this.$api
				.getMemberRemarkAdd(val)
				.then((res) => {
					this.$message.success(this.$t('common.modify_success'))
					this.$refs.editForm.resetFields()
					this.editVisible = false
					this.editLoading = false
					// this.getUserInfo()
					this.$emit('parentRefresh')
				})
				.catch(() => {
					this.editLoading = false
				})
		},
		refresh() {
			// this.getUserInfo()
			this.refreshLoading = true
			Promise.all([
				this.getWindControllerLevelDict(),
				this.getMemberLabelDict(),
				this.getCreditLevelList()
			]).finally(() => {
				this.$emit('parentRefresh')
				this.refreshLoading = false
			})
		},
		closeFormDialog() {
			this.$refs.editForm.resetFields()
			this.editVisible = false
		},
		// 获取风控层级
		getWindControllerLevelDict() {
			return this.$api
				.getSelectWindControlLevel({
					windControlType: 1,
					merchantId: this.parentData.merchantId
				})
				.then((res) => {
					this.riskLevelList = res?.data || []
				})
		},
		// 获取会员标签
		getMemberLabelDict() {
			return this.$api
				.getMemberLabelDict({
					labelType: 0,
					merchantId: this.parentData.merchantId
				})
				.then((res) => {
					this.memberLabelList = res?.data || []
				})
		},
		// 获取信用等级
		getCreditLevelList() {
			return this.$api.getCreditLevelConfcreditList().then((res) => {
				this.creditLevelList = res?.data || []
			})
		},
		handelAreaCode(val) {
			this.selectedZonecode = this.zonecodeList.find(
				(item) => val === item.code
			)
			this.editData.areaCode = val
			this.editData.mobile = ''
		},
		onMobileNumberInput() {
			this.editData.mobile = this.editData.mobile.replace(/[^\d]+/g, '')
		}
	}
}
</script>
<style lang="scss" scoped>
.btn-list-box {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	.backgroundTitelBox {
		width: 180px;
		height: 40px;
		text-align: center;
		line-height: 40px;
		background: #000;
		color: rgb(255, 255, 255);
		margin: 20px;
		margin-left: 0;
	}
	.editMsg {
		text-align: center;
		line-height: 18px;
		padding: 0 20px;
		margin-left: 20px;
		border-left: 1px solid #ccc;
		i {
			font-size: 18px;
			font-weight: bold;
			margin-bottom: 5px;
		}
	}
}
::v-deep .el-dialog__header {
	color: #909399;
	font-weight: 700;
}
.dialog-footer {
	text-align: center;
}
::v-deep .el-textarea .el-input__count {
	bottom: unset;
}
</style>
